import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import ChartsWrap from "components/charts/chartsWrap";
import config from "src/config";

const PictographHistogramChart = ({
  title = "数据展示",
  name = "",
  data = []
}) => {
  const [theme, changeTheme] = useState("shine");
  const handleChangeTheme = () => {
    const themes = config.themes;
    const index = themes.indexOf(theme);
    if (index >= themes.length - 1) {
      changeTheme(themes[0]);
    } else {
      changeTheme(themes[index + 1]);
    }
  };

  const scores = data.map(item => parseInt(item.score));
  const max = Math.max(...scores);

  const getOption = data => {
    return {
      toolbox: {
        feature: {
          saveAsImage: {
            show: true,
            name: title,
            pixelRatio: 2
          },
          dataView: {},
          restore: {}
        }
      },
      grid: {
        left: "20%",
        top: "10%",
        bottom: 10
      },
      tooltip: {
        trigger: "item"
      },
      xAxis: {
        max: max,
        splitLine: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          data: data.map(item => item.searchWord),
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: -4,
            textStyle: {
              fontSize: 16.25
            }
          }
        }
      ],
      series: [
        {
          type: "pictorialBar",
          symbol:
            "image://",
          symbolRepeat: "fixed",
          symbolMargin: "5%",
          symbolClip: true,
          symbolSize: 22.5,
          symbolPosition: "start",
          symbolOffset: [20, 0],
          symbolBoundingData: max,
          data: scores,
          z: 10,
          name: name
        },
        {
          name: name,
          type: "pictorialBar",
          itemStyle: {
            normal: {
              opacity: 0.3
            }
          },
          label: {
            normal: {
              show: false
            }
          },
          animationDuration: 0,
          symbolRepeat: "fixed",
          symbolMargin: "5%",
          symbol:
            "image://",
          symbolSize: 22.5,
          symbolBoundingData: max,
          symbolPosition: "start",
          symbolOffset: [20, 0],
          data: data.map(item => parseInt(item.score)),
          z: 5
        }
      ]
    };
  };

  return (
    <ChartsWrap title={title} handleClick={handleChangeTheme} text="切换主题">
      <ReactEcharts theme={theme} option={getOption(data)} />
    </ChartsWrap>
  );
};

export default PictographHistogramChart;
